<mat-toolbar color="primary">
  <span class="sidenav-toggle">
    <button mat-button (click)="sidenav.toggle()">
      <mat-icon>menu</mat-icon>
    </button>
  </span>
  <span><button mat-button (click)="goHome()"><b>{{title}}</b></button> </span>
  <span class="toolbar-span"> </span>
  <button mat-icon-button class="toolbar-right" (click)="goHelp()">
    <mat-icon>help</mat-icon>
  </button>
</mat-toolbar>
<!--SIDE PANEL-->
<mat-sidenav-container class="sidenav-fab-container">
  <mat-sidenav #sidenav mode="{{sideNavMode}}" class="chep-sidenav" [opened]="true">
    <div class="scrolling-content">
      <mat-tab-group>
        <!--SEARCH-->
        <mat-tab>
          <ng-template mat-tab-label>
            <mat-icon>search</mat-icon>
            Search
          </ng-template>
          <mat-accordion>
            <!--KEYWORD SEARCH-->
            <mat-expansion-panel [expanded]="true">
              <mat-expansion-panel-header>
                <mat-panel-title>
                  Keyword search
                </mat-panel-title>
                <mat-panel-description>
                  Search targets/molecules by ChEMBL id or keywords.
                </mat-panel-description>
              </mat-expansion-panel-header>
              <app-keyword-search></app-keyword-search>
            </mat-expansion-panel>
            <!--STRUCTURE SEARCH-->
            <mat-expansion-panel>
              <mat-expansion-panel-header>
                <mat-panel-title>
                  Structure search
                </mat-panel-title>
                <mat-panel-description>
                  Search molecules by drawing molecular structure.
                </mat-panel-description>
              </mat-expansion-panel-header>
              <app-structure-search></app-structure-search>
            </mat-expansion-panel>
            <!--TARGETS BROWSE-->
            <mat-expansion-panel>
              <mat-expansion-panel-header>
                <mat-panel-title>
                  Browse targets classes
                </mat-panel-title>
                <mat-panel-description>
                  Browse targets classes
                </mat-panel-description>
              </mat-expansion-panel-header>
              <app-jstree
                [elementId]="'target-tree'">
                loading...
              </app-jstree>
            </mat-expansion-panel>
            <!--KEGG DISEASE BROWSE-->
            <mat-expansion-panel>
              <mat-expansion-panel-header>
                <mat-panel-title>
                  Browse targets by diseases
                </mat-panel-title>
                <mat-panel-description>
                  Browse targets by diseases
                </mat-panel-description>
              </mat-expansion-panel-header>
              <app-jstree-kegg-disease
                [elementId]="'kegg-disease-tree'">
                loading...
              </app-jstree-kegg-disease>
            </mat-expansion-panel>
          </mat-accordion>
        </mat-tab>
        <!--OPTIONS-->
        <mat-tab>
          <ng-template mat-tab-label>
            <mat-icon>device_hub</mat-icon>
            settings
          </ng-template>
          <div class="sidenav-settings">
            <h5>ChEMBL-Explorer settings</h5>
            <small>(more options coming soon)</small>
            <hr>
            <div>
              <mat-slide-toggle
                [color]="'accent'"
                (change)="disableTooltip($event)"
              >
                Disable tool tips
              </mat-slide-toggle>
            </div>
            <div>
              <mat-slide-toggle
                [color]="'accent'"
                (change)="changeSideNavMode($event)"
              >
                Auto close side panel
              </mat-slide-toggle>
            </div>
          </div>
        </mat-tab>
      </mat-tab-group>
    </div>
  </mat-sidenav>
  <div class="cheb-main-content">
    <!--RESULT ENTITY LIST OR ENTITY DETAIL-->
    <router-outlet></router-outlet>
  </div>
</mat-sidenav-container>
